<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册 | 机械配件商城</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="./element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="components/min-width-container.css" />
	<link rel="stylesheet" type="text/css" href="components/header-simple.css">
	<link rel="stylesheet" type="text/css" href="components/footer-bottom.css">
	<link rel="stylesheet" type="text/css" href="components/footer-image.css">
	<style>
		.app-content{
			padding-left: 188px;
			padding-top: 50px;
			padding-bottom: 100px;
		}
		
		.app-content-form{
			width: 380px;
		}
		
	</style>
</head>
<body>
    <div id="app">
		<header-simple></header-simple>
		<min-width-container>
			<div class="app-content">
				<div class="app-content-title">
					<h3>注册账号，玩转商城所有的服务！</h1>
				</div>
				<div class="app-content-form m-t-20">
					<el-form label-position="right" :rules="rules" ref="form" label-width="100px" :model="userRegister">
					  <el-form-item label="用户名:" prop="account">
					    <el-input v-model="userRegister.account" placeholder="1-16个字符"></el-input>
					  </el-form-item>
					  <el-form-item label="密码:"  prop="password">
					    <el-input v-model="userRegister.password" placeholder="1-32个字符" show-password></el-input>
					  </el-form-item>
					  <el-form-item label="确认密码:" prop="password_comfirmed">
					    <el-input v-model="userRegister.password_comfirmed" placeholder="再次确实密码" show-password></el-input>
					  </el-form-item>
					  <el-form-item label="手机:">
					    <el-input v-model="userRegister.phone"></el-input>
					  </el-form-item>
					  <el-form-item label="邮箱:">
					    <el-input v-model="userRegister.email"></el-input>
					  </el-form-item>
					  <el-form-item label="密保问题">
					    <el-input v-model="userRegister.question"></el-input>
					  </el-form-item>
					  <el-form-item label="密保答案">
					    <el-input v-model="userRegister.asw"></el-input>
					  </el-form-item>
					</el-form>
					<div style="margin-left: 80px;">
						<el-checkbox-group v-model="acknowledge">
							<div><el-checkbox name="acknowledge">我已经看过并同意《<span class="text-important-very">网络服务协议</span>》</el-checkbox></div>
						</el-checkbox-group>
						<div class="m-t-20">
							<el-button type="primary" size="small" @click="register">立即注册</el-button>
							<span  class="m-l-16 text-general-1 text-4" >已经注册，<span class="text-important-very pointer"  @click="window.location.href='/password-forget1.html'" >找回密码</span></span>
						</div>
					</div>
				</div>
			</div>
		</min-width-container>
		<footer-image></footer-image>
		<footer-bottom></footer-bottom>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./element-ui/index.js"></script>
	<script src="components/min-width-container.js"></script>
	<script src="components/header-simple.js"></script>
	<script src="components/footer-bottom.js"></script>
	<script src="components/footer-image.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data(){
				return {
					userRegister: {
						account: "",
						password: "",
						password_comfirmed: "",
						phone: "",
						email: "",
						question: "",
						asw: "",
					},
					acknowledge: "",
					rules:{
						account: [
							{ required: true, message: '请输入账号', trigger: 'blur' },
							{ min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
						],
						password: [
							{ required: true, message: '请输入密码', trigger: 'blur' },
							{ min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
						],
						password_comfirmed:[
							{ required: true, message: '请再次输入密码', trigger: 'blur' },
							{
								validator: (rule, value, callback) => {
									if(this.userRegister.password == this.userRegister.password_comfirmed){
										callback();
									} else {
										callback("两次输入的密码不一致");
									}  
								},
								trigger: 'blur',
							}
						],
						
					}
				};
            },
            methods: {
				register(){
					this.$refs.form.validate((valid)=>{
						if(valid){
							if(this.acknowledge){
								const params = new URLSearchParams();
								params.append('account', this.userRegister.account);
								params.append('password', this.userRegister.password);
								params.append('email', this.userRegister.email);
								params.append('phone', this.userRegister.phone);
								params.append('question', this.userRegister.question);
								params.append('asw', this.userRegister.asw);
								axios.post("/user/do_register.do", params)
								.then(response=>{
									const data = response.data;
									if(data.status === 0){
										this.$message({
											message: "注册成功",
											type: "success"
										});
										
										setTimeout(()=>{
											window.location.href = "./login.html";
										}, 1000);
									}else{
										this.$message(data.msg);
									}
								}).catch(err=>{
									this.$message.error('发送请求失败');
								})
							}else{
								this.$message("请先同意协议");
							}
						}
					});
				}
            }
        });
    </script>
</body>
</html>